<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>zui-select组件</title>
	<link rel="stylesheet" href="css/zui-select.css">
</head>
<body>
	<form action="" class="zui-form">
		<div class="zui-form-item">
			<div class="zui-inline">
				<label for="" class="zui-form-label">运营商：</label>
				<div class="zui-input-inline">
					<select name="" id="" class="zui-select">
						<option value="">全部</option>
						<option value="CMCC">移动</option>
						<option value="CUCC">联通</option>
						<option value="CTCC">电信</option>
					</select>
					<div class="zui-unselect zui-form-select">
						<div class="zui-select-title">
							<input type="text" placeholder="全部" value="" readonly="readonly" class="zui-input zui-unselect">
							<i class="zui-edge"></i>
						</div>
						<dl class="zui-anim zui-anim-upbit">
							<dd zui-value="CMCC">移动</dd>
							<dd zui-value="CUCC">联通</dd>
							<dd zui-value="CTCC">电信</dd>
						</dl>
					</div>
				</div>
			</div>
		</div>
	</form>
	<script src="./js/jquery.min.js"></script>
	<script>
		$(function(){
			$('.zui-input').click(function(e){
				$(this).parents('.zui-form-select').addClass('zui-form-selected');
				$('.zui-form-select dl').show();
			});
			$('.zui-form-select dl dd').click(function(e){
				$(this).addClass('zui-this').siblings().removeClass('zui-this');
				$('.zui-input').val($(this).text());
				$('.zui-form-select dl').hide();
				$(this).parents('.zui-form-select').removeClass('zui-form-selected');
			})
		})
	</script>
</body>
</html>